<!--
 * @Description: 资源管理---运维资源---服务器
 * @Author: 魏勇
 * @Date: 2020-03-09 15:36:26
 * @LastEditTime: 2020-03-31 18:16:32
 * @LastEditors: 魏勇
 -->
<template>
    <div class="server" style="background-color: #fff;">
        <el-row>
            <span :key="btnItem.id" v-for="(btnItem,index) in btns" style="margin-left: 8px;">
                  <el-button v-if="btnItem.type==='iconBtn'" @click="btnClick(btnItem)" :icon="btnItem.icon"></el-button>
                    <el-button v-else @click="btnClick(btnItem)"
                               :icon="btnItem.icon">
                        {{btnItem.label}}
                    </el-button>

            </span>
            <el-button style="margin-left: 8px;" :key="index" v-for="(btnItem,index) in extendBtns"
                       @click="btnClick(btnItem)"
                       :icon="btnItem.icon">
                {{btnItem.label}}
            </el-button>

        </el-row>

        <!--        表格-->
        <el-row style="padding-top: 8px;">
            <el-table-ctl :params="queryParams"   :maxHeight="maxHeight" ref="tableObj" :cols="gridCols"></el-table-ctl>
        </el-row>

        <!--        新增窗口-->
        <app-dialog
                :isShowDialog="isShowAddDialog||isShowPurchaseWin"
                :title="winTitle"
                @confirm="addConfirm"
                :width="winWidth"
                @close="closeAddWin">
            <dynamicForm ref="dynamicForm" :items="formCols"></dynamicForm>
        </app-dialog>



        <!--        购买记录-->
        <app-dialog class="purchase_dialog"
                :isShowDialog="isShowPurchaseRecordsWin"
                title="购买记录"
                width="70%"
                @confirm="addConfirm"
                @close="isShowPurchaseRecordsWin=false">
            <purchase-records :tabType="tabType" :formCols="formCols"></purchase-records>
        </app-dialog>
    </div>
</template>

<script>
    import crudMixin from '@/mixins/crudMixin.js';
    import enumData from "../data/enum";
    import cols, { _changeDbRecordToJson,changeDbFieldToJson,_changToAddDomain, _getFieldFromDb,extendFields} from '../data/domainCols.js';
    import AppDialog from "@/components/AppCommon/AppDialog";
    import dynamicForm from "@/views/devOpsResource/components/dynamicForm";
    import elTableCtl from "../components/el-table-ctl";
    import purchaseRecords from "../components/purchaseRecords";
    import { Loading } from 'element-ui';
    let loadingInstance=null;

    export default {
        name: "server",
        mixins: [crudMixin],
        components: {
            AppDialog,
            dynamicForm,
            elTableCtl,
            purchaseRecords,
        },
        computed: {
            queryParams() {
                return {type: enumData.server};
            }
        },
        data() {
            return {
                tableHeight:0,
                tabType: enumData.server,
                isShowPurchaseRecordsWin: false,
                isShowPurchaseWin: false,
                maxHeight: parseFloat(window.innerHeight) - 235,
                extendBtns: [
                    {id: 'purchase', label: '购买', icon: 'el-icon-sold-out'},
                    {id: 'purchaseRecords', label: '购买记录', icon: 'el-icon-tickets'}
                ],
                winWidth: (parseFloat(900)/parseFloat(document.body.clientWidth))*100+"%",
                //列集合
                gridCols: [],
                formCols:[],
            }
        },
        beforeMount() {
            loadingInstance = Loading.service({text:"加载中"});
            let formCols = [];let gridCols=[];
            cols.forEach((itemObj) => {
                formCols.push({...itemObj});
            });
            cols.forEach((itemObj) => {
                gridCols.push({...itemObj});
            });
            this.getDbField(formCols,gridCols);
        },
        mounted() {
          this.searchGridByCondition("");
          this.$nextTick(()=>{
              this.tableHeight=parseFloat(window.innerHeight) - 235
          })
        },
        watch: {},
        methods: {
            //根据条目名字进行查询
            searchGridByResName(resourceName){
                this.$refs.tableObj.flushGridByUrl("findResourceByCondition", {
                    method: "POST", customRequest: true, dataFun: (list) => {
                        let recordJsonAry = [];
                        list.forEach((itemObj, index) => {
                            recordJsonAry.push(_changeDbRecordToJson(itemObj["commonTenantResource"]));
                        });
                        return recordJsonAry;
                    }
                },{resourceName,resourceType:this.tabType});
            },
            //查询表格
            searchGridByCondition(resourceName,backFun){
                this.$refs.tableObj.flushGridByUrl("findCommonTenantResources", {
                    method: "get", customRequest: true, dataFun: (list) => {
                        let recordJsonAry = [];
                        list.forEach((itemObj, index) => {
                            recordJsonAry.push(_changeDbRecordToJson(itemObj["commonTenantResource"]));
                        });
                        backFun&&backFun();
                        return recordJsonAry;
                    }
                },{resourceName});
            },
            //查询动态列
            getDbField(formCols,gridCols) {
                this.api.getDbField({params: {type: this.tabType}}, {method: "get", customRequest: true})
                    .then(res => {
                        _getFieldFromDb(res["data"], formCols,gridCols);
                        this.formCols=formCols;
                        gridCols=gridCols.concat(extendFields);
                        this.gridCols = gridCols;
                        loadingInstance.close();
                    })
                    .catch(err => {
                        console.warn(err.msg)
                    });
            },
            //修改前加载数据
            loadRecord(id) {
                this.api.getCommonTenantResourceById({params: {id}}, {method: "get", customRequest: true})
                    .then(res => {
                        changeDbFieldToJson.call(this, res);
                    })
                    .catch(err => {
                        console.warn(err.msg)
                    });
            },
            //增加前的方法
            beforeAdd() {
                this.curRecordId = null;
                // _initColWidth(cols);
                this.formCols.forEach((itemObj) => {
                    itemObj["value"] = "";
                    itemObj.subItems&&itemObj.subItems.forEach((subItemObj)=>{
                        subItemObj["value"] = "";
                    });
                    if(itemObj.itemDatas!=null){
                        itemObj.itemDatas=[itemObj.subItems];
                    }
                })
            },
            //添加操作
            confirmOk() {
                if (this.curRecordId != null && this.curRecordId !== "") {
                    this.modRecordToDb();
                } else {
                    this.addRecordToDb();
                }
            },
            //添加数据到数据库
            addRecordToDb() {
                let params = _changToAddDomain(this.formCols, this.tabType);
                if(this.isShowPurchaseWin){
                    params["createType"]=1;
                }else{
                    params["createType"]=0;
                }
                this.api.addResource(params)
                    .then(res => {
                        this.isShowAddDialog = false;
                        this.isShowPurchaseWin=false;
                        this.curRecordId = null;
                        this.$refs.tableObj.reloadData();
                    })
                    .catch(err => {
                        console.warn(err.msg)
                    });
            },
            //修改数据到数据库
            modRecordToDb() {
                let params = _changToAddDomain(this.formCols, this.tabType);
                params["id"] = this.curRecordId;
                this.api.updateResource(params)
                    .then(res => {
                        this.isShowAddDialog = false;
                        this.curRecordId = null;
                        this.$refs.tableObj.reloadData();
                    })
                    .catch(err => {
                        console.warn(err.msg);
                    });
            },
            //删除操作
            delOk(ids) {
                this.api.deleteResourceById(ids)
                    .then(res => {
                        this.$refs.tableObj.reloadData();
                    })
                    .catch(err => {
                        console.warn(err.msg)
                    });
            },

        }
    };
</script>
<style type="text/css">
    .purchase_dialog .el-dialog .el-dialog__body{
        padding: 3px 12px;
    }
</style>

